<template>
  <div class="clearing-date-box">
    <el-checkbox v-model="isClearing" :true-value="1" :false-value="0" class="checkbox-box" />
    <div class="ml-10px flex items-center">
      <slot></slot>
    </div>
    <div class="ml-10px">
      <el-date-picker
        class="w-130px!"
        v-model="dateClearing"
        :disabled-date="disabledDate"
        :clearable="false"
        popper-class="meton-clearing-date-popper"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
        :disabled="!isClearing"
        type="date"
        placeholder="请选择日期"
      />
    </div>
  </div>
</template>

<script lang="ts" setup name="ClearingDate">
/** 补录公共组件 */
import { propTypes } from '@/utils/propTypes'

const props = defineProps({
  isCheck: propTypes.number.def(0),
  dateTime: propTypes.string.def('')
})
const emit = defineEmits(['update:isCheck', 'update:dateTime'])
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}

const isClearing = computed({
  get() {
    return props.isCheck
  },
  set(val) {
    // 触发 update:isClearing 事件，
    emit('update:isCheck', val)
  }
})
const dateClearing = computed({
  get() {
    return props.dateTime
  },
  set(val) {
    emit('update:dateTime', val)
  }
})
</script>

<style lang="scss" scoped>
.clearing-date-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .checkbox-box {
    :deep(.el-checkbox__inner) {
      width: 21px !important;
      height: 21px !important;

      &::after {
        left: 8px;
        top: 5px;
      }
    }
  }
}
</style>
